<template>
  <div class="tab_model">
    <div v-show="statistics.athleteCount || statistics.athleteCategoryCount" class="total_info_wrap">
      <span v-show="statistics.athleteCount" class="total_info_mr">参赛人数 {{ statistics.athleteCount }}</span>
      <span v-show="statistics.athleteCategoryCount">参赛人次 {{ statistics.athleteCategoryCount }}</span>
    </div>
    <!-- 模块 -->
    <van-list
      v-model="tableLoading"
      :finished="finished"
      :error.sync="error"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul>
        <li v-for="(item, index) in tableData" :key="index" style="margin-bottom: 5px;" class="info_wrap model_content gl_clear">
          <div class=" gl_fl">
            <img class="info_photo" :src="getStaticFileUrl(item.imagePath)" @error="errorPhoto">
          </div>
          <div class="info_right">
            <div class="info_name">{{ item.athleteName }}</div>
            <div>
              <img class="address_icon" src="@/assets/images/league/mb_delegation.png" alt="">
              <span class="address_text gl_ellipsis">{{ item.delegationName }}</span>
            </div>
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementCompetitionRequestCompetitionLeagueAthleteListLeagueCompetitionId // 联赛下参赛选手-（联赛首页）
} from '@/extend/api/gameswaggerApi/app';

import defaultPhoto from '@/assets/images/face_default.png';
export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    statistics: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      defaultPhoto: defaultPhoto, // 默认照片
      playerName: '',
      pageLoading: false,
      tableLoading: false,
      finished: false,
      error: false,
      tableData: [],
      total: 0,
      qo: {
        SkipCount: 0,
        Page: 1,
        MaxResultCount: 10
      }
    };
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getPageList();
        }
      }
    }
  },
  methods: {
    onLoad() {
      let _page = this.qo.Page || 1;
      _page++;
      this.qo.Page = _page;
      this.getPageList(_page);
    },
    // 获取页面数据
    getPageList (page) {
      const _qo = JSON.parse(JSON.stringify(this.qo));
      _qo.Page = page || 1;
      _qo.SkipCount = (_qo.Page - 1) * _qo.MaxResultCount;
      _qo.Name = this.playerName;
      this.apiAthleteList(_qo);
    },
    // 联赛下参赛选手-（联赛首页）
    apiAthleteList(qo) {
      this.tableLoading = true;
      api_GET_EventsManagementCompetitionRequestCompetitionLeagueAthleteListLeagueCompetitionId(this.gameInfo.id, qo)
        .then(
          res => {
            this.tableLoading = false;
            this.total = res.totalCount;
            this.tableData.push(...res.items);

            // 数据全部加载完成
            if (this.tableData.length >= this.total) {
              this.finished = true;
            }
          }
        )
        .catch(
          error => {
            this.error = true;
            this.tableLoading = false;
            console.log(error);
          }
        );
    },
    // 获取静态图片
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style lang="scss" scoped>
.tab_model {
  padding-top: 20px;
}
.total_info_wrap {
  box-sizing: border-box;
  width: calc(100% - 20px);
  height: 40px;
  margin: 0 auto 10px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 20px;
  color: #ED6A0C;
  font-weight: 400;
  background-color: #fffbe8;
}
.total_info_mr {
  margin-right: 23px;
}

.info_wrap {
  padding: 15px 14px;
}
.info_photo {
  width: 50px;
  height: 57px;
  border-radius: 4px;
}
.info_right {
  margin-left: 70px;
}
.info_name {
  padding-top: 7px;
  font-size: 15px;
  font-weight: 400;
  color: #000;
  line-height: 21px;
  margin-bottom: 3px;
}
.address_icon {
  width: 16px;
  height: 14px;
  margin-right: 9px;
  vertical-align: middle;
}
.address_text {
  width: calc(100% - 30px);
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 19px;
}
</style>
